import Taro, {Component} from '@tarojs/taro'

import {AtForm, AtInput, AtButton, AtIcon, AtImagePicker, AtTextarea} from 'taro-ui'
import {Picker, Text, View} from '@tarojs/components'
import './index.scss'
import {getGlobalData} from "../../../global.d";
import {createNotice,myUploadImg} from "./service";
import {uploadFile} from "@tarojs/taro-quickapp/src/api/request";


export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selector:[['全部','学校通知','活动通知','比赛通知','考试通知'],['全部','进行中','已截止']],
          selectorChecked:'全部&全部',
          title:'',
          content:'',
          sel1: 0,
          sel2: 0,
          files: [],
          fileID: 'xxxxx',
          json: {},
        }
    }
  componentWillMount(){
    this.setState({

    })
    Taro.setNavigationBarTitle({
      title:'发布通知'
    })
  }
  handleChange (key,value) {
    this.setState({
      [key]: value
    });
  }
  feedbackChange(event){
    this.setState({
      content: event.target.value
    })
  }
  Submit () {
      let myDate = new Date()
    const filePath = this.state.files[0].url
    /*正则表达式，匹配图片后缀上传图片*/
    /*使用当前时间戳作为图片名字，保证图片不会被覆盖*/
    const cloudPath = 'notice/'+myDate.getTime()+filePath.match(/\.[^.]+?$/)[0]
    this.setFileID(cloudPath,filePath)
  }

  async setFileID(cloudPath,filePath){
      await this.getFileId(cloudPath,filePath).then(res=>{
        this.state.fileID = res
        const user = getGlobalData('user');
        const myjson = {'user':user._id,
          'title': this.state.title,
          'content': this.state.content,
          'sel1':this.state.sel1,
          'sel2':this.state.sel2,
          'fileID':this.state.fileID,
          'classKey':user.userLastTimeClass.classKey
        }
        createNotice(myjson)
      })

  }
  /*异步函数，获取fileID*/
  async getFileId(cloudPath,filePath){
      let fileID = ''
    await wx.cloud.uploadFile({
      cloudPath: cloudPath ,
      filePath: filePath,
    }).then(res => {
      fileID = res.fileID
    })
    console.log('在函数中的fileID是',fileID)
    return fileID
    resolve()
  }

  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[0][e.detail.value[0]]+'&'+this.state.selector[1][e.detail.value[1]]
    })
    this.state.sel1 = e.detail.value[0]
    this.state.sel2 = e.detail.value[1]
  }
  /*  handlePic (files) {
    this.setState({
      files
    })
  }*/
  onFail (mes) {
    console.log(mes)
  }
  onImageClick (index, file) {
    console.log(index, file)
  }
    render() {

        return (
          <AtForm>
            <View className='selectorChecked'>
              <Picker mode='multiSelector'
                      range={this.state.selector}
                      onChange={this.onChange}
              >
                <View className='pickerItem'>
                  <AtIcon prefixClass='icon' value='guolv' size='25' color='#719BEA'></AtIcon>
                  <Text> {this.state.selectorChecked}</Text>
                  <View className='icon_2'>
                    <AtIcon   value='chevron-down' size='25' color='#CCCCCC'></AtIcon>
                  </View>
                </View>
              </Picker>
            </View>
            <AtInput
              name='title'
              title='标题'
              type='text'
              placeholder='公告标题'
              value={this.state.title}
              onChange={this.handleChange.bind(this, 'title')}
            />
            <AtTextarea
              value={this.state.content}
              onChange={this.feedbackChange.bind(this)}
              maxLength={200}
              placeholder='公告内容...'
              auto-height={true}
            />
            <AtImagePicker
              files={this.state.files}
              onChange={this.handleChange.bind(this,'files')}
            />
            <AtButton onClick={this.Submit.bind(this)}>提交</AtButton>
          </AtForm>
        )
    }
}
